<template>
  <div class="page">
    <!-- 条件筛选 -->
    <div class="page_filter">
<!--      <el-input v-model="form.code" clearable placeholder="请输入传感器编号"></el-input>-->
<!--      <el-input v-model="form.loraSn" clearable placeholder="请输入loraSn"></el-input>-->
      <el-button class="common_btn-defalut" icon="el-icon-search" @click="form.page=1;queryList()">搜索</el-button>
    </div>
    <div class="page_main">
      <el-button icon="el-icon-plus" @click.stop="handleAdd" class="common_btn-small">发布通知</el-button>
      <!-- table -->
      <el-table :data="tableList" border>
        <el-table-column label="序号" fixed width="80">
          <template slot-scope="scope">
            {{getIndex(scope.$index)}}
          </template>
        </el-table-column>
        <el-table-column prop="title"  show-overflow-tooltip label="标题" >
        </el-table-column>
        <el-table-column prop="content"  show-overflow-tooltip label="描述" min-width="180">
        </el-table-column>
        <el-table-column prop="overTime"  label="过期时间" width="180">
          <template slot-scope="scope">
            {{scope.row.overTime|formatTimer()}}
          </template>
        </el-table-column>
        <el-table-column prop="operator"  label="操作人" width="120">
        </el-table-column>
        <el-table-column prop="createTime"  label="创建时间" width="180">
          <template slot-scope="scope">
            {{scope.row.createTime|formatTimer()}}
          </template>
        </el-table-column>
        <el-table-column prop="updateTime"  label="更新时间" width="180">
          <template slot-scope="scope">
            {{scope.row.updateTime|formatTimer()}}
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="180">
          <template slot-scope="scope">
            <button class="btn_edit" @click="handleEdit(scope.row)">编辑</button>
<!--            <el-popconfirm confirmButtonText='好的' cancelButtonText='不用了' icon="" title="确定删除该传感器信息吗？" @confirm="handleDelete(scope.row)">-->
<!--              <button slot="reference" class="btn_delete">删除</button>-->
<!--            </el-popconfirm>-->
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="form.page"
        :page-size="form.pageSize"    :page-sizes="[10, 20, 30, 40,50,60,70,80,90,100]"
              layout="sizes, prev, pager, next"  :total="total">
      </el-pagination>
    </div>
    <!-- 新增编辑弹窗 -->
    <el-dialog :title="dialogTitle" :visible.sync="isShowDialog" :close-on-click-modal="false" width="520px">
      <!-- 具体form表单 -->
      <el-form label-position="right" ref="form" :rules="rules" :model="currentRow" label-width="110px">
        <el-form-item label="标题" prop="title" >
          <el-input v-model="currentRow.title" placeholder="请输入标题"></el-input>
        </el-form-item>
        <el-form-item label="详情" prop="content">
          <el-input type="textarea" :rows="4" v-model="currentRow.content" placeholder="请输入详情"></el-input>
        </el-form-item>
        <el-form-item label="链接" prop="url" >
          <el-input v-model="currentRow.url" placeholder="请输入链接信息"></el-input>
        </el-form-item>
        <el-form-item label="文件" prop="projectApprovalList">
          <upload-file v-model="currentRow.adFileList" ref="uploadClear"></upload-file>
        </el-form-item>
        <el-form-item label="图片" prop="projectInfoImgList">
          <upload-img v-model="currentRow.adPicList" :limit="9" :size-limit="4"
                      ref="uploadPic"></upload-img>
        </el-form-item>
        <el-form-item label="过期时间" prop="overTime">
          <el-date-picker
            v-model="currentRow.overTime"
            type="datetime"
            placeholder="选择日期时间"
            align="right">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="通知单位" prop="buildUnitList">
          <el-select v-model="currentRow.buildUnitList" multiple clearable placeholder="不选择为全通知">
            <el-option v-for="item in buildUnitSelectList" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <!-- 操作按钮 -->
      <span slot="footer" class="dialog-footer">
        <el-button class="common_btn-white" @click="isShowDialog = false">取消</el-button>
        <el-button class="common_btn-defalut" type="primary" @click="validateForm">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import UploadImg from '@/components/upload-img'
  import UploadFile from '@/components/upload-file'
import {
  advertisementAdd,
  advertisementUpdate,
  advertisementQuery,
  buildUnitSelect
} from '@/services/model/investigation'
import {
  getDictData
} from '@/services/model/common'
import Format from '@/utils/format'
// form表单校验规则
const RULES = {
  // name: {
  //   required: true,
  //   message: '请输入标识'
  // },
  title: {
    required: true,
    message: '请输入标题'
  },
}
export default {
  data () {
    return {
      form: {
        page: 1,
        pageSize: 10
      },
      total: 0,
      rules: RULES, // 表单校验的规则
      tableList: [],
      isShowDialog: false, // 是否显示弹窗
      currentRow: {
        buildUnitList:[]
      },
      buildUnitSelectList:[],
    }
  },
  components: {UploadImg, UploadFile},
  computed: {
    // 弹窗的title
    dialogTitle () {
      return this.currentRow.id ? '编辑通告' : '新增通告'
    },
  },
  filters: {
    // 时间格式化
    formatTimer (timer) {
      return Format(new Date(timer))
    },
  },
  methods: {
    async getBuildUnitSelect(){
      let res = await buildUnitSelect()
      this.buildUnitSelectList = res.data ? res.data : []
    },
    // 通用获取枚举方法
    async queryDict (enumName, model) {
      const {
        data
      } = await getDictData({
        enumName
      })
      this[model] = data || []
    },

    // 获取当前的序号
    getIndex (index) {
      let param = (this.form.page - 1) * this.form.pageSize + index + 1
      return param
    },
    // 分页大小改变
    handleSizeChange (val) {
      this.form.pageSize = val
      this.queryList()
    },

    // 当前页码改变
    handleCurrentChange (val) {
      this.form.page = val
      this.queryList()
    },
    // 表单提交
    validateForm () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.submitData()
        }
      })
    },
    async submitData () {
      // 根据ID判断使用新增还是编辑
      let action = this.currentRow.id ? advertisementUpdate : advertisementAdd
      let res = await action(this.currentRow)
      if (res.code === 200) {
        this.$notify({
          type: 'success',
          title: '提示',
          message: '添加成功'
        })
        this.isShowDialog = false
        this.queryList()
      }
    },
    // 处理删除
    async handleDelete (row) {
      let res = await sensorDelete({
        id: row.id
      })
      if (res.code === 200) {
        this.$notify({
          type: 'success',
          title: '提示',
          message: '数据已删除'
        })
        this.queryList()
      } else {
        this.$notify({
          type: 'error',
          title: '提示',
          message: '数据删除失败'
        })
      }
    },
    // 新增数据
    handleAdd () {
      this.currentRow = {}
      this.isShowDialog = true
      this.$nextTick(() => {
        this.$refs.form.clearValidate()
      })
    },
    /**
       * row  当前操作行的对象
       */
    handleEdit (row) {
      this.currentRow = JSON.parse(JSON.stringify(row))
      this.isShowDialog = true
      this.$nextTick(() => {
        this.$refs.form.clearValidate()
      })
    },
    async queryList () {
      let res = await advertisementQuery(this.form)
      this.tableList = res.data?.records || []
      this.form.page = Number(res.data?.current)
      this.total = Number(res.data?.total)
    },
  },
  mounted () {
  },
  activated () {
    this.getBuildUnitSelect()
    this.queryList()
  }
}
</script>

<style lang="less" scoped>
</style>
